.udf-hidden{
    overflow: hidden;
}
.udf-hidden>.product {
    position: relative;
    width: 264px;
    height: 338px;
    float: left;
    list-style: none;
}

.udf-hidden>.product:not(:nth-child(4n)) {
    margin-right: 20px;
}

.product a {
    width: 100%;
    height: 100%;
    text-decoration: none;

}
.product a .img-cont{
    width: 264px;
    height: 277px;
    background: #f7f7f7;
    border: 1px solid rgba(170, 170, 170, 0.33);
    margin-left: 0;
    padding-left: 0;
    text-align: center;
    line-height: 277px;
    margin-bottom: 15px;
}

.product>a:hover {
    text-decoration: none
}

.product>a>.product_name {
    display: inline-block;
    line-height: 100%;
    width: 260px;
    text-align: center;
    font-size: 100%;
    font-family: "Kanit";
    font-weight: 700;
    color: #000;
}

.product:hover .hover_1 {
    color: #ff6c00;
    transition: all .5s;
}

.product:hover .hover_2 {
    color: #ffe800;
    transition: all .5s;
}

.product:hover .hover_3 {
    color: #006cad;
    transition: all .5s;
}

.product:hover .hover_4 {
    color: #933584;
    transition: all .5s;
}

.product:hover .hover_5 {
    color: #00703c;
    transition: all .5s;
}

.product:hover .hover_6 {
    color: #05a0cd;
    transition: all .5s;
}

.product:hover .hover_7 {
    color: #666666;
    transition: all .5s;
}

.product:hover .hover_8 {
    color: #f29402;
    transition: all .5s;
}

.product:hover .hover_9 {
    color: #e22328;
    transition: all .5s;
}

.product:hover .hover_10 {
    color: #23a12e;
    transition: all .5s;
}
